.card {
	height: 100%;
	overflow: visible !important;
	align-items: flex-start;
	background: transparent !important;
	margin-right: 1.5em;
	margin-bottom: .8em;
	&-box {
		display: flex;
		width: 100%;
		height: 100%;
		position: relative;
		overflow: visible;
		flex-direction: column;
		justify-content: center;
	}
	&-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all $transition-time-fast;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		&-container {
			position: relative;
			width: 100%;
			box-shadow: 0 4px 8px rgb(0 0 0 / 0.2);
			border-radius: $border-radius-default;
			overflow: hidden;
			height: auto;
			z-index: 0;

			&.thumb{
				aspect-ratio: 1.777777;
			}
			&.portrait{
				aspect-ratio: 0.666666;
			}
			&.square {
				aspect-ratio: 1;
			}
		}

		&-icon {
			font-size: 5.4em !important;
			&-container {
				background: linear-gradient(45deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.15));
				height: 100%;
				width: 100%;
				position: absolute;
				z-index: 0;
				top: 0;
				left: 0;
				transition: filter $transition-time-default;
				.material-symbols-rounded {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: rgb(255 255 255 / 0.5);
					font-size: 4em !important;
				}
			}
		}
		&-blurhash {
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
			overflow: hidden;
		}
	}
	&-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 10;
		opacity: 0;
		transition: opacity $transition-time-default;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		padding: 0.5em;
		background: rgb(0 0 0 / 0.6);
	}
	&:hover,
	&:focus,
	&:focus-within {
		.card-overlay {
			opacity: 1;
		}
	}
	&:hover {
		cursor: pointer;
	}

	&:focus {
		outline: none;
	}
	&-play-button {
		position: absolute !important;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	&-indicator {
		position: absolute;
		top: 0.4em;
		right: 0.4em;
		z-index: 2;
		padding: 0.2em 0.75em;
		background: rgb(20 20 20 / 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(5px);
		transition: opacity 250ms;
		border-radius: 100px;
		box-shadow: 0 0 5px rgb(0 0 0 / 0.2);
	}
	&-episode {
		.card-box {
			height: unset !important;
		}
	}

	&-actor {
		transition: all $transition-time-default;
		border-radius: 10px;
		// padding: 1em !important;
		&:hover {
			background: rgb(255 255 255 / 0.1) !important;
		}
		.card-image-container {
			border-radius: 100% !important;
		}
	}

	&-progress{
		// width: attr('data-progress');
		height: 100%;
		background: white;
		transition: width $transition-time-default ease-in-out;
		&-container{
			$padding: 12px;
			position: absolute;
			bottom: $padding;
			left: $padding;
			right: $padding;
			height: 4.5px;
			background: rgb(255 255 255 / 0.5);
			backdrop-filter: blur(10px);
			box-shadow: 0 0 10px rgb(20 20 20 / 0.5);
			z-index: 1;
			overflow: hidden;
			box-sizing: content-box;
			border-radius: 10px;
		}
	}

	&-text-container {
		display: flex !important;
		flex-direction: column;
	}
}
